<template>
  <div>
    CComponent:{{ this.$parent.msg }}
    <div>
      <button @click="clickHandler">按钮</button>
      <!-- <transition name="fade">
        <p v-show="flag">我是内容</p>
      </transition> -->
      <transition
        name="custom-classes-transition"
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOutRight"
      >
        <p v-show="flag">我是内容</p>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: "CComponent",
  data() {
    return {
      cmsg: "CComponentMsg",
      flag: true
    };
  },
  methods: {
    clickHandler() {
      this.flag = !this.flag;
    }
  }
};
</script>
<style scoped>
.fade-enter ,.fade-leave-to{
  opacity: 0;
}

.fade-enter-active,.fade-leave-active {
  transition: opacity 1s;
}

.fade-leave ,.fade-enter-to{
  opacity: 1;
}

</style>
